<template>
  <div class="app-container">
    <div class="title">客户管理</div>
    <!-- 搜索框展示 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="16"> <el-input class="search-box" type="text" prefix-icon="el-icon-search" size="small"
          placeholder="输入客户名称搜索" v-model="queryParams.keyword" @keyup.enter.native="getCustomerList">
        </el-input>

        <el-button class="button-box" v-if="!isData" size="mini" @click="isData = !isData">+ 筛选</el-button>
        <el-button class="button-box" v-else size="mini" @click="isData = !isData">- 筛选</el-button>
      </el-col>

      <el-col :span="8">
        <el-button class="col-item" size="mini" type="primary" @click="addCustomer"
          v-permission="'02001'">新增客户</el-button>
        <el-select class="col-item" v-model="sortType" placeholder="请选择" size="mini">
          <el-option v-for="item in sorts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>


    <!-- 详细搜索展示 -->

    <div class="search" v-show="isData">
      <div class="search-group">
        <span class="search-label">用户名：</span>
        <el-input class="search-item" type="text" prefix-icon="el-icon-search" size="small" placeholder="输入用户名搜索"
          v-model="queryParams.name">
        </el-input>
      </div>
      <div class="search-group">
        <span class="search-label">手机号：</span>
        <el-input class="search-item" type="text" prefix-icon="el-icon-search" size="small" placeholder="输入手机号搜索"
          v-model="queryParams.phone">
        </el-input>
      </div>
      <div class="search-group action-buttons">
        <el-button size="mini" type="success" @click="getCustomerList">查询</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 内容表格 -->
    <div class="content">
      <el-table :data="userList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
        <el-table-column type="selection" width="55">
        </el-table-column>

        <el-table-column fixed label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editUser(scope.row)" v-permission="'02002'">编辑</el-button>
            <el-popconfirm title="确认删除该行数据吗？" @onConfirm="delCustomer(scope.row)">
              <el-button slot="reference" size="mini" type="text" style="margin-left: 10px"
                v-permission="'02003'">删除</el-button>
            </el-popconfirm>
            <!-- <el-button @click="delUser(scope.row)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
        <el-table-column fixed prop="name" label="用户名" align="center" width="120">
        </el-table-column>
        <el-table-column prop="nick_name" label="用户昵称" align="center" width="120">
        </el-table-column>
        <el-table-column prop="avatar" align="center" label="头像" width="120">
          <template v-slot="{ row }">
            <el-avatar v-if="row.avatar" :src="row.avatar" :size="30" />
            <span v-else class="username"> {{ row.name?.charAt(0) }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" width="120">
        </el-table-column>
        <el-table-column prop="className" label="所属班级" align="center" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="创建人" align="center" width="120">
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" align="center" width="120">
        </el-table-column>
        <el-table-column>
          <!-- 占空位 -->
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination @size-change="changePageSize" @current-change="changePageIndex"
        :current-page="queryParams.pageIndex" :page-sizes="[10, 20, 50]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="userTotal">
      </el-pagination>
    </div>
    <!-- 增删页面弹层 -->
    <customer-add ref="addCustomer" :show-dialog.sync="showDialog" :title="dialogTitle" :userId="userId"
      @submit="getCustomerList"></customer-add>


  </div>
</template>
<script>


import { getCustomerList, delCustomer } from '@/api/customer'
import customerAdd from './components/customerAdd.vue';

export default {
  name: 'allCustomer',
  components: { customerAdd },
  created() {
    //访问后端客户接口
    this.getCustomerList()
    // 初始化防抖函数

  },
  watch: {
    //监听变化
    sortType(newVal) {

      this.queryParams.sortType = newVal;
      this.getCustomerList()
    },

  },
  data() {
    return {
      isData: false,
      sortType: '3',
      // 新增修改弹层
      showDialog: false,
      dialogTitle: '新增客户',
      userId: null,
      //批量选中
      selectedRows: [],
      // 用户总记录数
      userTotal: 0,
      // 排序
      sorts: [{
        value: '1',
        label: '姓名首字母升序'
      }, {
        value: '2',
        label: '姓名首字母降序'
      }, {
        value: '3',
        label: '创建时间由近到远'
      }, {
        value: '4',
        label: '创建时间由远到近'
      }, {
        value: '5',
        label: '更新时间由近到远'
      }, {
        value: '6',
        label: '更新时间由远到近'
      }],
      userList: [],
      // 查询参数
      queryParams: {
        sortType: '3',
        pageIndex: 0,
        pageSize: 10,
        name: '',
        phone: '',
        keyword: ''
      },
    }
  },
  methods: {
    async getCustomerList() {
      const { data, total } = await getCustomerList(this.queryParams)

      this.userList = data
      this.userTotal = total
    },
    // 监听表格选中变化
    handleSelectionChange(selection) {
      this.selectedRows = selection.map(row => row.id);
      console.log('当前选中的行id：', this.selectedRows);

      // this.selectedRows = selection; // 更新选中的行数据
    },
    tableRowClassName({ row, rowIndex }) {
      // 判断是否是偶数行（索引从 0 开始）
      if (rowIndex % 2 === 1) {
        return 'even-row'; // 偶数行的类名
      }
      return ''; // 其他行不添加类名
    },
    changePageIndex(newPageIndex) {
      //切换页数
      this.queryParams.pageIndex = newPageIndex - 1
      this.getCustomerList()
    },
    changePageSize(newPageSize) {
      //切换条数
      this.queryParams.pageSize = newPageSize
      //切换条数 页数默认置0
      this.queryParams.pageIndex = 0
      this.getCustomerList()
    },
    async delCustomer(row) {

      await delCustomer({ id: row.id })
      // 提示消息
      this.$message.success('删除客户成功')
      this.getCustomerList()
    },
    //新增客户
    addCustomer() {
      this.userId = null
      this.showDialog = true
      this.dialogTitle = '新增客户'
    },
    //编辑客户
    editUser(row) {
      this.userId = row.id
      this.showDialog = true
      this.dialogTitle = '编辑客户'
      // this.$nextTick(() => {
      //   this.$refs.addCustomer.getCustomerDetail()
      // })

    },

    reset() {
      this.queryParams = {
        sortType: '3',
        pageIndex: 0,
        pageSize: 10,
        name: '',
        phone: '',
        keyword: ''
      }
    }

  }

}
</script>
<style scoped>
.app-container {
  margin: 10px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;

  .title {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    /* 文字居中对齐 */
    margin-bottom: 10px;
    /* 给标题下方留出间距 */
    border-bottom: 1px solid #e8eaec;
  }

  .search-box {
    width: 280px;
    /* 设置宽度 */
    height: 20px;
    /* 设置高度 */
    line-height: 20px;
    margin-bottom: 15px;
    margin-right: 10px;
    /* 确保输入框内容垂直居中 */
    font-size: 12px;
    /* 调整字体大小以适应高度 */
  }

  .button-box {
    /* 设置宽度 */
    height: 32px;
    /* 设置高度 */
    line-height: 20px;
    font-size: 12px;

  }

  .col-item {
    margin-left: 10px;
  }

  .search {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  /* 每个搜索组 */
  .search-group {
    display: flex;
    align-items: center;
    /* 垂直对齐 */
    width: calc(20% - 10px);
    margin-right: 30px;
    /* 每行放两个 */
  }

  .search-label {
    font-size: 12px;
    margin-top: 10px;
    color: #606266;
    /* 防止文字换行 */
  }

  .search-item {
    flex: 1;
    /* 输入框占据剩余空间 */
    height: 20px;
    line-height: 20px;
    font-size: 12px;

  }

  /* 按钮组样式 */
  .action-buttons {
    display: flex;
    margin-top: 10px;
    align-items: center;
    gap: 5px;
    /* 按钮之间的间距 */
    width: auto;
    /* 自适应宽度 */
  }

  .content {
    margin-top: 20px;

    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display: inline-block;
    }
  }

  .pagination {
    margin-top: 20px;
  }




}
</style>
